<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>管理页面</title>

  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" /> -->

  <link rel="stylesheet" href="stylesheets/header.css">
  <link rel="stylesheet" href="stylesheets/footer.css">
  <link rel="stylesheet" href="stylesheets/inner_system.css">
  <link rel="shortcut icon" href="./images/SAU-logo.png" type="image/x-icon">
</head>

<body>
  <header class="main-header">
    <nav>
      <a href="##" class="home">
        <div class="icon">
          <img src="images/sau.svg" alt="">
        </div>
        <span class="logo-text">校社联·信息管理系统</span>
      </a>
      <a href="sauCenter.html" class="info" data-link="avatar">
          <span class="username">管理员</span>
          <div class="avatar">
            <!-- <img src="" alt=""> -->
            <div class="avatar-img"></div>
          </div>
        </a>
    </nav>
  </header>

  <main class="main-content">
    <div class="cell-20">
      <nav class="navigation">
        <ul class="sau-admin" data-role="sau-admin">
          <li class="function-button pointer current-function" data-role-function="latestNotice"><a href="sau_inner_system.html">最新公告</a></li>
          <li class="function-button pointer" data-role-function="clubInfo"><a href="sauClubInformation.html">社团信息</a></li>
          <li class="function-button pointer" data-role-function="messagePublish"><a href="sauNewsSend.html">信息发布</a></li>
          <li class="function-button pointer" data-role-function="registerAudit"><a href="sauResignCheck.html">注册审核</a></li>
          <li class="function-button pointer" data-role-function="annualAudit"><a href="sauAnnCheck.html">年度审核</a></li>
        </ul>
      </nav>
    </div>
    <div class="cell-108">
      <aside class="message-list">
        <div class="cell-function-bar">
          <header class="function-bar">
            <div class="grid-search-bar">
              <div class="cell-search-bar">
                <input type="text" placeholder="搜索" class="search-bar">
              </div>
              <div class="cell-refresh-button">
                <div class="refresh-button pointer" data-button-role="refresh" id="refresh">
                  <img src="images/refresh.svg" alt="refresh">
                </div>
              </div>
              <div class="search-button pointer" data-button-role="search" id="search">
                <img src="images/search.svg" alt="search">
              </div>
            </div>
            <h3 class="function-name" data-role-function="latestNotice">最新公告</h3>
            <div class="delete-button pointer" data-button-role="delete" id="deleteButton">
              <img src="images/delete.svg" alt="delete">
            </div>
            
          </header>

        </div>
        <div class="cell-masonry">
          <ul class="masonry" id="News">
           <!-- <li class="message-item current-item pointer">
              <div class="cell-unread">
                <div class="message-item-unread unread" data-message-item="unread"></div>
              </div>
              <div class="cell-message-info">
                <div class="message-item-title">
                  <span data-message-item="title">校社联管理系统建好啦</span>
                </div>
                <div class="message-item-option">
                  <input type="checkbox" data-message-item="option">
                </div>
                <div class="message-item-sender">
                  <span data-message-item="sender">by 校社联</span>
                </div>
                <div class="message-item-time">
                  <span data-message-item="time">今天</span>
                </div>
              </div>
            </li>

            <li class="message-item pointer">
              <div class="cell-unread">
                <div class="message-item-unread unread"  data-message-item="unread"></div>
              </div>
              <div class="cell-message-info">
                <div class="message-item-title"><span data-message-item="title">校社联管理系统建好啦</span></div>
                <div class="message-item-option"><input type="checkbox" data-message-item="option"></div>
                <div class="message-item-sender"><span data-message-item="sender">by 校社联</span></div>
                <div class="message-item-time"><span data-message-item="time">今天</span></div>
              </div>
            </li>-->
          </ul>
        </div>
      </aside>
      <aside class="message-detail">
        <div class="cell-detail-info">
          <header class="detail-info">
            <div class="detail-avatar">
              <img src="images/avatar.svg" alt="" data-message-detail="avatar">
            </div>
            <div class="detail-info-container">
              <div class="detail-sender" data-message-detail="sender">校社联</div>
              <!-- <div class="detail-time" data-message-detail="time">2014年8月10日 2:13</div> -->
              <div class="detail-time" data-message-detail="time"></div>
            </div>
            <div class="detail-delete-bar pointer" data-message-detail="delete" id="singleDel">
              <div class="detail-delete-icon">
                <img src="images/delete.svg" alt="delete">
              </div>
              <div class="detail-delete-text">删除</div>
            </div>
          </header>
        </div>
        <div class="cell-detail-main">
          <article class="detail-main">
            <h3 data-message-detail="title" id="title">校社联管理系统建好啦</h3>
            <div data-message-detail="content">
           
              <p>各位社长、成员、同学们： 你们好！</p>
              <p class="para-indent">现在我们校社联管理系统已经建好，请各位填好自己的相关信息、并加入各自的社团。谢谢合作！</p>
            </div>
          </article>
        </div>
      </aside>
    </div>
  </main>

  <!-- <footer class="main-footer">
    <div class="footer">
      <span class="copyright">2018 @ 校社联管理系统</span>
    </div>
  </footer> -->
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">

    // $('.masonry').css('height', document.documentElement.clientHeight - 150);
    // $('.detail-main').css('height', document.documentElement.clientHeight - 150);
    // TODO: 设置高度
    // TODO: 左栏背景效果
  </script>
  <script type="text/javascript" src="javascripts/innerSystem.js"></script>

</body>

</html>
